<template>
  <div class="work-information base">
    <!--填资进度条-->
    <nav-bar :position="'work'" :status="status"/>
    <div v-show="false">
      <doFaceButton ref="checkFaceInfo" />
    </div>
    <div ref="workForm" class="form">

      <!--职业-->
      <!--      <div class="form-group">-->
      <!--        <label>{{ $t('profession') }}</label>-->
      <!--        <input v-model="form.jobType" @click="showChooseProfession" :disabled="readonly" type="text" :placeholder="$t('plsChoose')" readonly-->
      <!--               class="input-select val"/>-->
      <!--      </div>-->

      <!--      <div v-if="form.jobType">-->

      <div>
        <div class="form-group">
          <label>{{ $t('companyName') }} <span v-if="isOptional">({{ $t('optional') }})</span></label><!--公司名称-->
          <input v-model="form.companyName" @blur="handleBlurCheck" :disabled="readonly" type="text"
            :placeholder="$t('plsInput')" maxlength="100" class="val" />
        </div>
        <!-- 职位 -->
        <!-- <div class="form-group">
          <label>{{ $t('position') }} <span v-if="isOptional">({{ $t('optional') }})</span></label>
          <input v-model="form.position" @click="showChoosePosition" :disabled="readonly" type="text"
                 :placeholder="$t('plsChoose')" readonly class="input-select val" />
        </div> -->

        <!--发薪周期-->
        <div class="form-group">
          <label>{{ $t('payrollCycle') }} <span v-if="isOptional">({{ $t('optional') }})</span></label>
          <input v-model="form.payCycle" @click="showChoosePayrollCycle" :disabled="readonly" type="text"
            :placeholder="$t('plsChoose')" readonly class="input-select val" />
        </div>
        <!--发薪日-->
        <div v-if="form.payCycle && form.payCycle !== 'Daily'" class="form-group">
          <label>{{ $t('payday') }} <span v-if="isOptional">({{ $t('optional') }})</span></label>
          <input v-model="form.payday1" @click="showChoosePayday('1')" :disabled="readonly" type="text" readonly
            class="input-select val" />
        </div>
        <div v-if="form.payCycle && form.payCycle !== 'Daily' && form.payCycle === 'Once two weeks'"
          class="form-group module">
          <input v-model="form.payday2" @click="showChoosePayday('2')" :disabled="readonly" type="text" readonly
            class="input-select val" />
        </div>

        <div class="form-group">
          <label>{{ $t('monthlyIncome') }} <span v-if="isStudent">({{ $t('optional') }})</span></label><!--月收入-->
          <input v-model="form.salary" @click="showChooseIncome" :disabled="readonly" type="text"
            :placeholder="$t('plsChoose')" readonly class="input-select val" />
        </div>
        <div class="form-group">
          <label>{{ $t('companyPhone') }} <span v-if="isOptional">({{ $t('optional') }})</span></label><!--公司电话-->
          <input class="val" @focus='IdFocus' @blur="IdBlur" v-model="form.companyTel" ref="companyTel"
            :disabled="readonly" type="text" :placeholder="$t('plsInput')" maxlength="13" />
          <p class="error-tips-new">{{ $t('plsInputRightCompany') }}</p>
        </div>
        <div class="form-group">
          <label>{{ $t('companyAddress') }} <span v-if="isOptional">({{ $t('optional') }})</span></label><!--公司地址-->
          <input v-model="form.region" @click="showChooseRegion" :disabled="readonly" type="text" placeholder="Region"
            readonly class="input-select val" />
        </div>
        <div class="form-group module">
          <input v-model="form.province" @click="showChooseProvince" :disabled="!form.region || readonly" id="province"
            type="text" placeholder="Province" readonly class="input-select val" />
        </div>
        <div class="form-group module">
          <input v-model="form.city" id="city" @click="showChooseCity"
            :disabled="!form.region || !form.province || readonly" type="text" placeholder="City" readonly
            class="input-select val" />
        </div>
        <div class="form-group module">
          <input v-model="form.address" @blur="handleBlurCheck($event, 'address')" ref="address" :disabled="readonly"
            type="text" placeholder="Detailed address" maxlength="500" class="val" />
          <p class="error-tips-new">{{ $t('plsInputCorrectAddress') }}</p>
        </div>

      </div>

    </div>

    <div class="btn-box">
      <!--      <button @click="submitHandler" class="submitBtn btn-ui" :disabled="btnCanSubmit || disabledBtn || readonly">{{ btnName }}</button>-->
      <button @click="submitHandler" class="submitBtn btn-ui" :disabled="btnCanSubmit || disabledBtn || readonly"
        :class="{ 'isSave': $route.query.btnType === 'save' }">{{ btnName }}</button>
    </div>

    <!--地区选择框-->
    <popup v-model="isVisibleChooseRegion" position="bottom">
      <picker v-if="isVisibleChooseRegionP" show-toolbar :title="$t('companyAddress')" :columns="regionData"
        value-key="region" :default-index="regionData.map(item => item.region).indexOf(form.region)"
        @cancel="isVisibleChooseRegion = false; isVisibleChooseRegionP = false;" @confirm="chooseRegion" />
    </popup>

    <!--省选择框-->
    <popup v-model="isVisibleChooseProvince" position="bottom">
      <picker v-if="isVisibleChooseProvinceP" show-toolbar :title="$t('companyAddress')" :columns="provinceData"
        value-key="Province" :default-index="provinceData.map(item => item.Province).indexOf(form.province)"
        @cancel="isVisibleChooseProvince = false; isVisibleChooseProvinceP = false;" @confirm="chooseProvince" />
    </popup>

    <!--市选择框-->
    <popup v-model="isVisibleChooseCity" position="bottom">
      <picker v-if="isVisibleChooseCityP" show-toolbar :title="$t('companyAddress')" :columns="cityData"
        value-key="TownCity" :default-index="cityData.map(item => item.TownCity).indexOf(form.city)"
        @cancel="isVisibleChooseCity = false; isVisibleChooseCityP = false;" @confirm="chooseCity" />
    </popup>

    <!--职业选择框-->
    <popup v-model="isVisibleChooseProfession" position="bottom">
      <picker v-if="isVisibleChooseProfessionP" show-toolbar :title="$t('profession')" :columns="professionData"
        value-key="name" :default-index="professionData.map(item => item.name).indexOf(form.jobType)"
        @cancel="isVisibleChooseProfession = false; isVisibleChooseProfessionP = false;" @confirm="chooseProfession" />
    </popup>

    <!--职位选择框-->
    <popup v-model="isVisibleChoosePosition" position="bottom">
      <picker v-if="isVisibleChoosePositionP" show-toolbar :title="$t('position')" :columns="positionData"
        :default-index="positionData.indexOf(form.position)"
        @cancel="isVisibleChoosePosition = false; isVisibleChoosePositionP = false;" @confirm="choosePosition" />
    </popup>

    <!--发薪周期选择框-->
    <popup v-model="isVisibleChoosePayrollCycle" position="bottom">
      <picker v-if="isVisibleChoosePayrollCycleP" show-toolbar :title="$t('payrollCycle')" :columns="payrollCycleData"
        :default-index="payrollCycleData.indexOf(form.payCycle)"
        @cancel="isVisibleChoosePayrollCycle = false; isVisibleChoosePayrollCycleP = false;"
        @confirm="choosePayrollCycle" />
    </popup>

    <!--发薪日选择框-->
    <popup v-model="isVisibleChoosePayday" position="bottom">
      <picker v-if="isVisibleChoosePaydayP" show-toolbar :title="$t('payday')" :columns="paydayData"
        :default-index="paydayData.indexOf(form['payday' + paydayIndex])"
        @cancel="isVisibleChoosePayday = false; isVisibleChoosePaydayP = false;" @confirm="choosePayday" />
    </popup>

    <!--发薪日周一到周日选择框-->
    <popup v-model="isVisibleChoosePaydayWeek" position="bottom">
      <picker v-if="isVisibleChoosePaydayWeekP" show-toolbar :title="$t('payday')" :columns="paydayWeekData"
        :default-index="paydayWeekData.indexOf(form['payday1'])"
        @cancel="isVisibleChoosePaydayWeek = false; isVisibleChoosePaydayWeekP = false;" @confirm="choosePaydayWeek" />
    </popup>

    <!--月收入选择框-->
    <popup v-model="isVisibleChooseIncome" position="bottom">
      <picker v-if="isVisibleChooseIncomeP" show-toolbar :title="$t('monthlyIncome')" :columns="incomeData"
        :default-index="incomeData.indexOf(form.salary)"
        @cancel="isVisibleChooseIncome = false; isVisibleChooseIncomeP = false;" @confirm="chooseIncome" />
    </popup>

  </div>
</template>

<script src="./main.js"></script>

<style lang="scss" scoped>
@import "../index";
</style>
